<template>
  <div>
    <a-form-model
      ref="formModel"
      :model="form"
      class="search-form"
      layout="inline"
      :rules="formRules"
    >
    <div class="search-box-end">
      <a-form-model-item
        class="search-item"
        prop="dateRange"
        label="操作时间"
      >
        <a-range-picker
          v-model="form.dateRange"
          inputReadOnly
          :placeholder="['开始时间', '结束时间']"
          :disabled-date="disabledDate"
          format="YYYY/MM/DD HH:mm:ss"
          :show-time="true"
        />
      </a-form-model-item>

      <a-form-model-item
        class="search-item"
        prop="name"
        label="操作账号"
      >
        <a-input
          autocomplete="off"
          v-model="form.name"
        ></a-input>
      </a-form-model-item>

      <a-form-model-item
        class="search-item"
        prop="ip"
        label="IP"
      >
        <a-input
          autocomplete="off"
          v-model="form.ip"
        ></a-input>
      </a-form-model-item>

      <div style="line-height: 40px;" class="search-item">
        <a-button
          type="primary"
          @click="loadData(true)"
          icon="search"
          style="margin-left: 12px"
        >查询</a-button>
        <a-button
          @click="resetSearchForm"
          icon="reload"
          style="margin-left: 12px"
        >重置</a-button>
      </div>
    </div>
    </a-form-model>

    <a-table
      ref="table"
      rowKey="id"
      size="middle"
      :columns="columns"
      :dataSource="gDataSource"
      :pagination="gPagination"
      @change="gHandleTableChange"
    >
      <span
        slot="sortCol"
        slot-scope="text, record, index"
      >
        {{
          (gPagination.current - 1) * gPagination.pageSize + parseInt(index) + 1
        }}
      </span>
    </a-table>
  </div>
</template>

<script>
  import moment from 'moment'
  import { GwListMixin } from "@/mixins/GwListMixin";
  import { getAction } from "@/api/manage";

  export default {
    name: "LoginLog",
    mixins: [GwListMixin],
    data() {
      return {
        // 表头
        columns: [
        {
          title: "序号",
          dataIndex: "",
          key: "rowIndex",
          width: 50,
          align: "center",
          scopedSlots: { customRender: "sortCol" },
        },
        {
          title: "操作时间",
          dataIndex: "createTime",
          width: 100,
        },
        {
          title: "操作账号",
          dataIndex: "username",
          width: 100,
        },
        {
          title: "IP",
          dataIndex: "ip",
          width: 100,
        },
        {
          title: "操作类型",
          dataIndex: "operateTypeName",
          width: 100,
        },
        {
          title: "操作结果",
          dataIndex: "statusName",
          width: 100,
        }, ],
        formRules: {
          name: [{
            validator: this.validators.noWhitespace(),
            trigger: 'change'
          },
          {
            validator: this.validators.noIllegalString(),
            trigger: 'change'
          },
          {
            max: 10,
            message: '长度在 1 到 10 个字符',
            trigger: 'change'
          },],
          ip: [{
            validator: this.validators.noWhitespace(),
            validator: this.validators.isValidIp(),
            trigger: 'change'
          }],
          dateRange: [{ validator: this.validators.datetimeValidator() }]
        },
        form: {
          name: "",
          dateRange: [],
          ip: "",
        },
      };
    },
    mounted() {
      this.loadData();
    },
    methods: {
      disabledDate(current) {
        // Can not select days before today and today
        return current && current > moment().endOf('day');
      },
      loadData(isDoSearch) {
        this.$refs.formModel.validate(error => {
          if (!error) { return }
          this.gQueryParam.ip = this.form.ip
          this.gQueryParam.username = this.form.name
          this.gQueryParam.startTime = this.form.dateRange.length > 0 ? this.form.dateRange[0].format('YYYY/MM/DD HH:mm:ss') : ''
          this.gQueryParam.endTime = this.form.dateRange.length > 0 ? this.form.dateRange[1].format('YYYY/MM/DD HH:mm:ss') : ''
          if (isDoSearch) {
            this.gQueryParam.pageNo = 1
            this.gPagination.current = 1
          }
          this.gQueryParam.logType = [1]
          this.gQueryParam.title = '登录日志'
          getAction('/sys/log/list', this.gQueryParam).then((res) => {
            if (res.success) {
              this.gDataSource = res.result.records
              this.gPagination.total = res.result.total
            }
          })
        })
      },
      resetSearchForm() {
        this.form.name = ""
        this.form.dateRange = []
        this.form.ip = ""
        this.$refs.formModel.resetFields()
      },
    },
  };
</script>

<style lang="less" scoped>
  .search-form {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    .search-box-end {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      flex-wrap: wrap;
      .search-item{
        padding-left: 16px ;
        margin: 0 0 16px 0;
      }
    }
  }
  /deep/ .ant-form-inline .ant-form-item {
    margin: 0;
  }
</style>